﻿<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="./Res/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./Res/Css/create.css">

<%-- HR create employee --%>

<title>create employee</title>
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
<script>

<%-- 
	判断username是否为空
	丢失焦点时进行判断是否为空
	为空提示，不为空时传入check_uname。jsp判断数据库是否存在，接收返回语句
	"w1"为check_uname.jsp所返回的语句，若有，则先移除。
--%>
$(document).ready(function(){	
	var flag =0;
	$("[name='username']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w1").remove();
				$(this).after("<span id='warming1'><font color = red>username must be filled</font></span>");
				flag =1;
			}
		}else{
			$("#warming1").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_uname.jsp",
				data:{username:$("input[name='username']").val()},
				success:function(data,textStatus){
					$("#w1").remove();
					$("[name='username']").after(data);
					//alert(data);
				}
			});
		}
	});
});	

<%-- 
	判断password是否为空
	丢失焦点时进行判断是否为空
	为空提示，不为空时传入check_pword。jsp判断密码是否正确，接收返回语句
	"w2"为check_pword.jsp所返回的语句，若有，则先移除。
--%>

$(document).ready(function(){
	var flag =0;
	$("[name='password']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w2").remove();
				$(this).after("<span id='warming2'><font color = red>password must be filled</font></span>");
				flag =1;
			}
		}else{
			$("#warming2").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_pword.jsp",
				data:{password:$("input[name='password']").val()},
				success:function(data,textStatus){
					$("#w2").remove();
					$("[name='password']").after(data);
				}
			});
		}
	});
});	

<%-- 
	判断basic_salary是否为空
	丢失焦点时进行判断是否为空
	为空提示，不为空时传入check_bsalary.jsp判断初始工资是否正确，接收返回语句
	"w3"为check_bsalary.jsp所返回的语句，若有，则先移除。
--%>
$(document).ready(function(){
	var flag =0;
	$("[name='basic_salary']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w3").remove();
				$(this).after("<span id='warming3'><font color = red>basic_salary must be filled</font></span>");
				flag =1;
			}
		}else{
			$("#warming3").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_bsalary.jsp",
				data:{basic_salary:$("input[name='basic_salary']").val()},
				success:function(data,textStatus){
					$("#w3").remove();
					$("[name='basic_salary']").after(data);
				}
			});
		}
	});
});	

<%-- 
	判断age是否为空
	丢失焦点时进行判断是否为空
	为空提示可以为空，不为空时传入check_age。jsp判断age格式是否正确，接收返回语句
	"w4"为check_age.jsp所返回的语句，若有，则先移除。
--%>
$(document).ready(function(){
	var flag =0;
	$("[name='age']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w4").remove();
				$(this).after("<span id='warming4'><font color = green>Age can be null</font></span>");
				flag =1;
			}
		}else{
			$("#warming4").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_age.jsp",
				data:{age:$("input[name='age']").val()},
				success:function(data,textStatus){
					$("#w4").remove();
					$("[name='age']").after(data);
				}
			});
		}
	});
});	

<%-- 
	判断fname是否为空
	丢失焦点时进行判断是否为空
	为空提示，不为空时传入check_fname。jsp判断fname是否正确，接收返回语句
	"w5"为check_fname.jsp所返回的语句，若有，则先移除。
--%>
$(document).ready(function(){
	var flag =0;
	$("[name='fname']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w5").remove();
				$(this).after("<span id='warming5'><font color = red>firstname must be filled</font></span>");
				flag =1;
			}
		}else{
			$("#warming5").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_fname.jsp",
				data:{fname:$("input[name='fname']").val()},
				success:function(data,textStatus){
					$("#w5").remove();
					$("[name='fname']").after(data);
				}
			});
		}
	});
});

<%-- 
	判断lname是否为空
	丢失焦点时进行判断是否为空
	为空提示，不为空时传入check_lname。jsp判断lname是否正确，接收返回语句
	"w6"为check_lname.jsp所返回的语句，若有，则先移除。
--%>
$(document).ready(function(){
	var flag =0;
	$("[name='lname']").focusout(function(){
		if($(this).val().length==0 ){
			if(flag ==0){
				$("#w6").remove();
				$(this).after("<span id='warming6'><font color = red>username must be filled</font></span>");
				flag =1;
			}
		}else{
			$("#warming6").remove();	
			flag =0;
			$.ajax({
				type:"post",
				url:"./check_lname.jsp",
				data:{lname:$("input[name='lname']").val()},
				success:function(data,textStatus){
					$("#w6").remove();
					$("[name='lname']").after(data);
				}
			});
		}
	});
});

<%-- 点击reset按钮时，所有提示语句清空    --%>
$(document).ready(function(){
	$("#reset").click(function(){
		$("#warming1").remove();
		$("#w1").remove();
		$("#warming2").remove();
		$("#w2").remove();
		$("#warming3").remove();
		$("#w3").remove();
		$("#warming4").remove();
		$("#w4").remove();
		$("#warming5").remove();		
		$("#w5").remove();
		$("#warming6").remove();
		$("#w6").remove();
		
	});	
});	

</script>

</head>

<%-- 
	表单主体 
	点击submit将数据传入CheckRegister.java进行验证并提交数据。
--%>

<body class="container">
<h2>Register Employee</h2>
	<form action="CheckRegister" method="post" class="form-inline">
		<div class="form-group">
			<label for="username">Username:</label><input class="form-control" id="username" name="username" type="text">
		</div><br/>
		
		<div class="form-group">
			<label for="password">Passwrod:</label><input class="form-control" id="password" name="password" type="password">
		</div><br/>
			
		<div class="form-group">
			<label for="basic_salary">Primary Salary:</label><input class="form-control" id="basic_salary" name="basic_salary" type="text">
		</div><br/>
		
		<div class="form-group">
			<label for="fname">First Name:</label><input class="form-control" id="fname" name="fname" type="text">	
		</div><br/>
		
		<div class="form-group">
			<label for="lname">Last name:</label><input class="form-control" id="lname" name="lname" type="text">
		</div><br/>
		
		<div class="form-group">
			<label for="age">Age:</label><input class="form-control" id="age" name="age" type="text">	
		</div><br/>
		
		<div class="form-group">
			<label for="role">Role:</label>&nbsp;<input class="radio" id="admin" name="role" value = "admin" type="radio"><span>admin</span><input checked="true" class="radio" id="emp" name="role" value = "emp" type="radio"><span>emp</span>		
		</div><br/>

		<div class="form-group">
			<label for="sex">Sex:</label> <input class="radio" id="man" name="sex" value = "man" type="radio" checked="true" ><span>man&nbsp;&nbsp;</span><input class="radio" id="female" name="sex" value = "female" type="radio"><span>woman</span>
		</div><br/>
		
		<input id="submit" class="btn  btn-primary" type="submit" value="submit" >
		<input id="reset" class="btn  btn-default" type="reset" value="reset">
	</form>	
</body>
</html>
